<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>event_hover</title>

<script src='../lib/jquery-2.1.1.js'></script>
<script>

var cnt=0;
$(document).ready(function(){
	//기본 style지정
	
	$('#div1').css({
		'border' :  '1px solid #aaaaaa',
		'width' : '100px',
		'padding' : '20px',
		'text-align:' : 'center'
		
	});
	
	//hover
	$('#div1').hover(function (){
		//over
		$(this).css({'background-color':'#eeeeee', 'cursor':'pointer'});
	},function(){
		//out
		$(this).css('background-color','');
	});
	
	
	//keydown event 처리
	
	$('#mid').keyup(function(ev){
		var str="KEY CODE :" + ev.keyCode;
		if(ev.keyCode<65 || ev.keyCode>90 && ev.keyCode!=8 && ev.keyCode !=32){//a~z가 아닌경우
			
			var temp=$('#mid').val();//val=value
			temp=temp.substring(0,temp.length-1);
			$('#mid').val(temp);
		}
		$('#result').text(str);

	});	
	
	
	
	
	
	//trigger event 처리
	$('#btnTrigger').click(chk);
	$('#btnTrigger').trigger('click');
	
	});		

	function chk(){
	cnt++;
		$('#result').text('클릭 이벤트 발생!--->'+cnt);
	
	
	}
	
</script>
</head>
<body>
<div id='div1'>Event Hover</div>
<input type='text' id='mid' autocomplete='off'>
<div id='result'></div>
<input type='button' value='자동 클릭' id='btnTrigger'>
</body>
</html>